<script setup>
import { reactive } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay } from "swiper/modules"
import "swiper/css"
import "swiper/css/pagination"
import { RouterLink } from 'vue-router';



const modules = reactive([Pagination, Autoplay]);
//定义组件Props属性
const props = defineProps({
    topStories: Array
});
// console.log("组件的props书数据===>",props.topStories)
</script>
<template>
    <Swiper class="Swiper" :modules="modules" :pagination="{ clickable: true }" :autoplay="{ delay: 2500 }">
        <SwiperSlide v-for="item in props.topStories" :key="item.id">
            <div class="banner">
                <RouterLink class="banner-img" :to="`/detail/${item.id}`">
                    <img v-bind:src="item.image" />
                </RouterLink>
                <!-- <div class="t" :style="{backgroundImage:`linear-gradient(to top,#000,rgba(255,255,255,0.3))`}"> -->
                <!-- str.replace()字符串替换函数 把后台颜色里面0x替换成# -->
                <div class="t"
                    :style="{ backgroundImage: `linear-gradient(to top,${item.image_hue.replace('0x', '#')},rgba(255,255,255,0.1))` }">
                    <h1>{{ item.title }}</h1>
                    <p>{{ item.hint }}</p>
                </div>
            </div>
        </SwiperSlide>
    </Swiper>

</template>
<style scoped>
.banner {
    width: 100%;
    background-color: antiquewhite;
    border: 1px solid
}

.banner .banner-img {
    display: flex;
    width: 100%;
    height: 500px;
}

.banner>img {
    width: 100%;
    height: auto;
}

.t {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px 25px;
    width: 100%;
}

.t>h1 {
    font-size: 20px;
    font-weight: normal;
    font-family: '微软雅黑';
    color: white;
}

.t>p {
    color: white;
    font-size: 14px;
}

:deep(.swiper-pagination-bullet) {
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.8);
}

:deep(.swiper-pagination-bullet-active) {
    width: 20px;
    background-color: white;
    border-radius: 5px;
}

:deep(.swiper-pagination-horizontal) {
    position: absolute;
    left: auto;
    right: 30px;
    width: auto;
}
</style>